<template>
  <div class="home">
    <div class="head">
      <ul class="nav">
        <li class="active">中文</li>
        <li @click="gotoPage()">English</li>
      </ul>
      <div class="logo"><img src="@/assets/images/logo.png"/>喵拍</div>
<!--      <div class="loglist"><span>喵拍1.1.1 for Windows 全新发布 </span> <span>06-19</span></div>-->
<!--      <div class="showMore">更多日志 ></div>-->
      <ul class="typelist">
        <li  @click="down('Android')">
          <div class="icon"><img src="@/assets/images/Android.png"/></div>
          <div class="text">Android</div>
        </li>
        <li @click="down('iOS')">
          <div class="icon"><img src="@/assets/images/ios.png"/></div>
          <div class="text">iOS<br/>即将上线</div>
        </li>
      </ul>
    </div>
    <div class="content-big">
      <div class="ul-item">
        <div class="li">
          <img src="@/assets/images/1.png"/>
          <div class="content">喵拍APP，英国华人二手交易平台</div>
        </div>
        <div class="li">
          <img src="@/assets/images/5.png"/>
          <div class="content">超低费率，转手更保值</div>
        </div>
      </div>
      <div class="contentList">
        <div class="li">
          <img src="@/assets/images/8.png"/>
          <div class="content">推广商品，出售更快捷</div>
        </div>
        <div class="li">
          <img src="@/assets/images/6.png"/>
          <div class="content">简易操作，买卖更方便</div>
        </div>
        <div class="li">
          <img src="@/assets/images/2.png"/>
          <div class="content">支付保障，交易更安全</div>
        </div>
        <div class="li">
          <img src="@/assets/images/7.png"/>
          <div class="content">微信支付，一键更省心</div>
        </div>
      </div>
    </div>
    <div class="aboutUs-big">
      <img src="@/assets/images/bg.png"/>
      <div class="aboutUs">
        <div class="title">关于我们</div>
        <div class="aboutUsContent">喵拍科技（Lucky Meow LTD）致力于将创新的商业模式和前端科技带入英国C2C二手交易市场，为买卖双方用户们提供一个安全、便利的线上二手交易平台。通过鼓励用户购买、转卖二手商品，我们将减少物品浪费对环境造成的影响，并建立一个用户之间相互流通的交易体系。</div>
      </div>
    </div>
    <div class="footer">
      <ul>
        <li>
          <img src="@/assets/images/footer1.png"/>
          <div @click="goToExternalSite">
            <p>服务条款</p>
            <p style="cursor: pointer" @click="goToExternalSite">查看相关信息</p>
          </div>
        </li>
        <li>
          <img src="@/assets/images/footer2.png"/>
          <div>
            <p>联系方式</p>
            <p>+44 7482072161</p>
          </div>
        </li>
        <li>
          <img src="@/assets/images/footer3.png"/>
          <div>
            <p>官方邮箱</p>
            <p>hello@luckymeow.co.uk</p>
          </div>
        </li>
      </ul>
    </div>
  </div>

</template>

<script>
import '@/assets/styles/common.scss'
import {reqDownloadlink} from "@/api/agreement";

export default {
  data() {
    return {};
  },
  components: {},
  mounted() {

  },
  methods: {
    goToExternalSite() {
      const routeData = this.$router.resolve({
        path: '/agreement',
      });
      window.open(routeData.href, '_blank');
    },
    down(type) {
      if (type == 'Android') {
        reqDownloadlink().then(res => {
          console.log('获取下载链接', res.data);
          const fileUrl = res.data; // 文件的URL地址
          const link = document.createElement('a');
          link.href = fileUrl;
          link.setAttribute('download', type);
          link.click();

        })
      } else {
        this.$message({
          message: '这个应用还没有上线哦!',
          type: 'warning'
        });
      }

    },
    gotoPage() {
      this.$router.push({
        path: 'english'
      })
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
